<template>
    <div>
        <div class="coupon-title">优惠列表：</div>
        <el-table 
        :data="conditionList" 
        v-model="conditionList" 
        border 
        style="width: 100%;" 
        class="coupont-table"
        header-row-class-name="sss"
        row-class-name="sss">
            <el-table-column
              type="index"
              width="50">
            </el-table-column>
            <el-table-column prop="name"  label="优惠门槛" align='center'>
                <template scope="scope">
                    <span>满: ${{scope.row.amount}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="type"  label="优惠方式" align='center'>
                <template scope="scope">
                    <div>
                        <span v-if="scope.row.discount"><i class="el-icon-success" style="color: #409EFF"></i>减现金:${{scope.row.discount}}； </span>
                        <span v-if="!scope.row.discount"><i class="el-icon-error" style="color: rgb(255, 73, 73)"></i>减现金； </span>
                        <span v-if="scope.row.freePost"><i class="el-icon-success" style="color: #409EFF"></i>免邮</span>
                        <span v-if="!scope.row.freePost"><i class="el-icon-error" style="color: rgb(255, 73, 73)"></i>免邮</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="coupon-title">商品列表：</div>
        <el-table :data="productList" v-model="productList" border style="width: 100%;">
            <el-table-column prop="name"  label="商品信息" align='center'>
                <template scope="scope">
                    <div class="left-pro">
                        <a target="_blank" :href="'https://trade.onloon.net/detail?itemId='+scope.row.itemId">
                            <img class="pro-img" :src="scope.row.itemPicUrl" alt="product">
                            <span class="pro-name" >{{scope.row.itemName}}</span>
                        </a>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="type"  label="价格" align='center'>
                <template scope="scope">
                    <span v-if="scope.row.highPrice == scope.row.lowPrice">{{"$"+scope.row.highPrice}}</span>
                    <span v-else>{{"$"+scope.row.lowPrice+ "-" +"$"+scope.row.highPrice}}</span>
                </template>
            </el-table-column>
        </el-table>
        
    </div>
	
</template>
<script>
	import Vue from 'vue'
	import {Table,TableColumn} from 'element-ui'
	Vue.use(Table);
	Vue.use(TableColumn);

	export default {
		data () {
            return {
                couponList:[1,2,1]
            }
        },
        props: {
        	'productList':{
                default: []
            },
            'conditionList':{
                default: []
            }
        }
	}
</script>
<style lang="scss">
  .el-cascader {width: 100%}
    .coupont-table td, .coupont-table th{
        padding: 3px 0;
    }
    .coupon-title{
        height:24px;
        line-height:24px;
        text-indent: 15px;
    }
    .sss{
       td, th{
            padding: 3px 0;
        }
    }
    .pro-img{
        width: 40px;
        vertical-align: middle;
    }
    .pro-name{
        padding-left: 5px;
        display: inline-block;
        width: 420px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .left-pro{
        text-align: left;
    }
 
</style>